<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}" class="inner-info">
    <Title title="订单信息" style="margin-bottom: 10px;"/>
    <el-form :class="{'mobile-el-form': showMobilePage}" :label-position="showMobilePage ? 'left' : 'right'" class="customer-form lineHeight32" label-width="110px">
      <el-row :gutter="8" class="content">
        <el-col :span="8">
          <el-form-item label="关联订单：" class="related-content">
            <ToolTip v-if="costData.isNotRelateOrder" :content="detailData.orderNum" is-can-click @handelClick="goDetail(detailData)" />
            <div v-else>--</div>
            <span v-if="canCancelRelated" class="el-icon-close delete-btn" @click="cancelRelated"/>
            <div v-if="canRlatedOrder(costData)">
              <el-button type="info" size="small" class="related-btn" @click="relatedOrder">{{ costData.isNotRelateOrder ? '重新关联' : '关联订单' }}</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col v-if="costData.costBelong === 0" :span="8">
          <el-form-item label="订单类型：">
            <ToolTip :content="detailData.orderType | orderTypeStatusFilter"/>
          </el-form-item>
        </el-col>
        <template v-if="costData.costBelong === 0 || costData.costBelong === 5">
          <el-col :span="8">
            <el-form-item label="品牌名称：">
              <ToolTip :content="detailData.theme"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单平台：">
              <ToolTip :content="detailData.orderPlatform">
                <span class="platform overflow"><platformIcon :data="detailData.orderPlatform" />{{ detailData.orderPlatform }}</span>
              </ToolTip>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单形式：">
              <ToolTip :content="detailData.orderForm"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号：">
              <resource-info
                v-if="detailData.resourceName"
                :resource-name="detailData.resourceName"
                :account-name-organization="detailData.accountNameOrganization"
                :account-name-platform="detailData.accountNamePlatform"
                :resource-id="detailData.resourceCode"
                style="max-width:calc(100% - 20px)"
                account-belong-name="none"
              />
              <div v-else>--</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部门：">
              <ToolTip :content="detailData.attributionMatrixName"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号归属：">
              <span v-if="detailData.accountBelongName" class="overflow">{{ detailData.accountBelongName || '--' }}</span>
              <div v-else>--</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="执行人：">
              <span v-if="detailData.orderOperatorStr" class="overflow">{{ detailData.orderOperatorStr || '--' }}</span>
              <div v-else>--</div>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import ResourceInfo from '@/components/ResourceInfo';
import platformIcon from '@/components/Common/platformIcon';
import { mapState } from 'vuex';
import { format } from '@/filters/date';

import { orderTypeStatusFilter } from '@/filters/status';

import { SETTLEMENT_STATUS, SEALING_STATUS, BELONG } from '@/utils/const/cost';
import { ORDER_STATUS } from '@/utils/const/order';

export default {
  components: {
    Title,
    ResourceInfo,
    platformIcon
  },
  filters: {
    format,
    orderTypeStatusFilter
  },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    costData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    canCancelRelated() {
      // orderStatus 订单状态： 0: 草稿中 1: 待发布 2: 待核算 3: 待审批 4: 待封账 5: 封账中 6: 已封账 7: 已完成
      // settlementStatus 结算状态 0:待结算 1: 已完成 2:结算中   5:已忽略
      const { isNotRelateOrder, settlementStatus, relatedOrderStatus, costBelong, sealBillType } = this.costData;
      const { orderStatus } = this.detailData;
      return this.costData && isNotRelateOrder && this.detailData &&
      orderStatus !== ORDER_STATUS.SEALING &&
      orderStatus !== ORDER_STATUS.SEALING_COMPLETED &&
      orderStatus !== ORDER_STATUS.COMPLETED &&
      (settlementStatus === SETTLEMENT_STATUS.TO_BE_SETTLED || settlementStatus === SETTLEMENT_STATUS.IGNORED) &&
      !relatedOrderStatus &&
      costBelong === BELONG.CHANNEL &&
      sealBillType !== SEALING_STATUS.COMPLETED && sealBillType !== SEALING_STATUS.SEALING;
    }
  },
  methods: {
    relatedOrder() {
      this.$emit('relatedOrder');
    },
    cancelRelated() {
      this.$emit('cancelRelated');
    },
    canRlatedOrder({ settlementStatus: sStauts, relatedOrderId }) {
      // orderStatus 订单状态： 0: 草稿中 1: 待发布 2: 待核算 3: 待审批 4: 待封账 5: 封账中 6: 已封账 7: 已完成
      // settlementStatus 结算状态 0:待结算 1: 已完成 2:结算中   5:已忽略
      // reviewState: 审批状态
      const { orderStatus } = this.detailData;
      const { costBelong, sealBillType } = this.costData;
      return !relatedOrderId ||
      (relatedOrderId && (sStauts === SETTLEMENT_STATUS.TO_BE_SETTLED || sStauts === SETTLEMENT_STATUS.IGNORED) &&
      orderStatus !== ORDER_STATUS.SEALING &&
      orderStatus !== ORDER_STATUS.SEALING_COMPLETED &&
      orderStatus !== ORDER_STATUS.COMPLETED &&
      costBelong === BELONG.CHANNEL) &&
      sealBillType !== SEALING_STATUS.COMPLETED && sealBillType !== SEALING_STATUS.SEALING;
    },
    goDetail(item) {
      const id = item.id;
      let routeUrl = null;
      let params = {};
      const costBelong = this.costData.costBelong;
      if (costBelong === BELONG.CHANNEL) {
        // 渠道订单
        params = { name: 'orderDetail', params: { orderId: id }};
      } else if (costBelong === BELONG.PROJECT) {
        // 项目订单
        params = { name: 'projectDetail', params: { id }};
      } else if (costBelong === BELONG.IMAGE_AUTH) {
        // 商务订单
        params = { name: 'mengliOrderDetail', params: { id }, query: { type: 0 }};
      } else if (costBelong === BELONG.MARKET_AUTH) {
        // 营销授权
        params = { name: 'mengliOrderDetail', params: { id }, query: { type: 1 }};
      } else if (costBelong === BELONG.PROJECT_CHANNEL) {
        // 项目渠道单
        params = { name: 'projectChildDetail', params: { id }};
      }
      routeUrl = this.$router.resolve(params);
      if (routeUrl) window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}
.inner-info {
  margin-bottom: 26px;
  &::v-deep {
    .el-form-item__content{
      display: flex;
    }
    .el-form-item {
      margin-bottom: 5px;
      .el-form-item__label {
        color: #999;
      }
    }
  }
}
.max-width-200 {
  max-width: 200px;
}
.platform {
  display: flex;
}
.delete-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.related-content {
  flex-wrap: wrap;
}
.related-btn {
  margin-left: 10px;
  padding: 5px 10px;
  width: 80px;
}
</style>
